<!DOCTYPE html>
<html ng-app="plunker">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Playonline</title>

<!-- Bootstrap Core CSS -->
<link href="/newplayonline/style/css/bootstrap.min.css" rel="stylesheet">

<link href="/newplayonline/style/css/bootstrap-theme.min.css"
	rel="stylesheet">

<link href="/newplayonline/style/css/bootstrap-responsive.css"
	rel="stylesheet">


<style type="text/css">
h2 {
	margin: 0;
	color: #666;
	padding-top: 90px;
	font-size: 52px;
	font-family: "trebuchet ms", sans-serif;
}

.item {
	background: #333;
	text-align: center;
	height: 190px !important;
}

.carousel {
	margin-top: 70px;
}

.bs-example {
	margin: 20px;
}
</style>

</head>

<body  ng-controller="Index">
	<div ng-include src="'/newplayonline/page/menu.html'"></div>

	<div class="container theme-showcase" role="main">
		<section id="slide">
			<header></header>
			<section id="carrossel" class="carousel slide" data-interval="3000"
				data-ride="carousel">
				<div class="carousel-inner">
					<figure class="active item">
						<img alt="" src="/newplayonline/img/img1.jpg">
					</figure>
					<figure class="item">
						<img alt="" src="/newplayonline/img/img2.jpg">
					</figure>
					<figure class="item">
						<img alt="" src="/newplayonline/img/img3.jpg">
					</figure>
					<figure class="item">
						<img alt="" src="/newplayonline/img/img4.jpg">
					</figure>

				</div>
				<!-- Carousel nav -->

				<a class="carousel-control left" href="#carrossel" data-slide="prev">
					<!--             <span class="glyphicon glyphicon-chevron-left"></span> -->

				</a> <a class="carousel-control right" href="#carrossel"
					data-slide="next"> <span class="glyphicon"></span>
				</a>
			</section>
		</section>
		<br />
		<p class="bs-component">
		<table class="table table-striped table-hover ">
			<thead>
				<tr>
					<th><a href="#" ng-click="carregarByTipoDeBolao('1')"><img
							alt="" ng-disable="true"
							ng-src="http://www1.caixa.gov.br/loterias/resources/btnmegasena4512463.jpg">
					</a></th>
					<th><a href="#" ng-click="carregarByTipoDeBolao('2')"><img
							alt=""
							ng-src="http://www1.caixa.gov.br/loterias/resources/bntquina7894564.jpg">
					</a></th>
					<th><a href="#" ng-click="carregarByTipoDeBolao('3')"><img
							alt=""
							ng-src="http://www1.caixa.gov.br/loterias/resources/bntlotomania10231045.jpg">
					</a></th>
					<th><a href="#" ng-click="carregarByTipoDeBolao('4')"><img
							alt=""
							ng-src="http://www1.caixa.gov.br/loterias/resources/btnduplasena362450.jpg">
					</a></th>
					<th><a href="#" ng-click="carregarByTipoDeBolao('5')"><img
							alt=""
							ng-src="http://www1.caixa.gov.br/loterias/resources/bntlotofacil453412.jpg">
					</a></th>
				</tr>
			</thead>
		</table>

		</p>

		<!-- Main jumbotron for a primary marketing message or call to action -->
		<div class="bs-component">
			<legend>{{legenda}}</legend>
			<table class="table table-striped table-hover ">
				<thead>
					<tr>
						<th>Identificador</th>
						<th>Jogos</th>
						<th>Valor cota</th>
						<th>Total de cotas</th>
						<th>Quantidade</th>
						<th>Comprar</th>
					</tr>
				</thead>
				<tbody ng-repeat="bolao in boloes">
					<tr>
						<th>{{bolao.identificadorGrupo}}</th>
						<td><a data-toggle="modal" href="#myModal"
							ng-click="carregarJogos(bolao);"><img alt=""
								ng-src="/newplayonline/img/lupa-mini.png"> </a></td>
						<td>{{bolao.valorCota}}</td>
						<td>{{bolao.qtdCotas}}</td>
						<td><select id="cotas" ng-model="cotas" class="form-control">
								<option ng-repeat="valor in tamanho(bolao.qtdCotas)">{{valor}}</option>
						</select></td>
						<td><a href="/newplayonline/carrinho/" ng-click = "adicionarCarrinhoBolao(bolao,cotas)"><img alt=""
								ng-src="/newplayonline/img/carrinho-mini.png"> </a></td>
					</tr>
				</tbody>
			</table>
			<div id="source-button" class="btn btn-primary btn-xs"
				style="display: none;">&lt; &gt;</div>
		</div>
		<div class="modal" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<span><b>Playonline - Jogos</b></span>
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<!-- <h4 class="modal-title" id="myModalLabel"><!--CARREGAR DINAMICO Mega Sena</h4> -->
					</div>
					<div class="modal-body">
						<div class="jumbotron">
							<span><h4>Muita sorte</h4></span><br /> <span> <!--CARREGAR DINAMICO-->
								<img alt="" ng-disable="true"
								ng-src="http://www1.caixa.gov.br/loterias/resources/btnmegasena4512463.jpg">
							</span>
							<h4>Default</h4>
							<pagination boundary-links="true" total-items="totalItems"
								data-current-page="currentPage" data-max-size="maxSize"
								ng-model="currentPage" class="pagination-sm"
								data-num-pages="numPages()" previous-text="&lsaquo;"
								next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

							<div data-pagination="" data-num-pages="numPages()"
								data-current-page="currentPage" data-max-size="maxSize"
								data-boundary-links="true"></div>
							<table class="table table-striped table-hover ">
								<thead>
									<tr>
										<th></th>
										<th>ID</th>
										<th>Jogo</th>
									</tr>
								</thead>
								<tbody ng-repeat="jogo in jogos">
									<tr>
										<td></td>
										<td>{{jogo.id}}</td>
										<td>{{jogo.sequencia}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="wrap"></div>

	<div ng-include src="'/newplayonline/page/footer.html'"></div>

	<script type="text/javascript"
		src="/newplayonline/javascript/recursos/jquery-1.11.1.js"></script>

	<script src="/newplayonline/javascript/recursos/bootstrap.min.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/recursos/angular_2.min.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/recursos/ui-bootstrap-tpls-0.11.0.min.js"></script>

	<script type="text/javascript"
		src="/newplayonline/javascript/control/index.js"></script>
</body>

</html>